登录注册页：语言切换与暗黑模式，隐藏菜单
登录注册页面虽然是独立布局（不使用 DefaultLayout），但仍然需要支持语言切换和暗黑模式。这两个功能已经在 Header 组件中实现，现在需要将它们提取到登录页面中独立使用。同时，登录页需要配置路由 meta 确保不显示后台菜单。
登录页的独立布局
登录页不使用 DefaultLayout（没有侧栏和头部），而是在页面内自行处理布局：
<!-- src/pages/login/index.vue -->
<template>
<div class="relative w-full h-screen overflow-hidden">
<!-- 背景图片 -->
<div class="absolute inset-0 bg-cover bg-center" :style="bgStyle" />
<!-- 右上角工具栏 -->
<div class="absolute top-4 right-4 flex items-center gap-2">
<ChangeLocale :locales="locales" @change="handleLocaleChange" />
<DarkModeToggle />
</div>
<!-- 表单卡片 -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-full max-w-md p-8 bg-white/80 dark:bg-gray-800/80 rounded-lg backdrop-blur">
<LoginForm />
</div>
</div>
</div>
</template>
vue
隐藏菜单的路由配置
// src/pages/login/index.vue
definePage({
meta: {
hideMenu: true,
title: 'login',
},
})
typescript
在 App.vue 中根据 hideMenu 决定是否渲染 DefaultLayout：
<template>
<DefaultLayout v-if="!$route.meta.hideMenu">
<RouterView />
</DefaultLayout>
<RouterView v-else />
</template>
vue
语言切换的复用
ChangeLocale 组件是独立的基础组件，不依赖 Header 或 Layout，可以直接在登录页中使用：
const locales: LocaleItem[] = [
{ text: '中文', icon: 'circle-flags:cn', name: 'zh-CN' },
{ text: 'English', icon: 'circle-flags:us', name: 'en' },
]
const handleLocaleChange = async (name: string) => {
await loadLocaleMessages(name)
}
typescript
暗黑模式的背景适配
暗黑模式下，背景图片需要降低亮度，表单卡片的背景色也要相应调整：
<!-- 使用 Tailwind 的 dark: 前缀 -->
<div class="absolute inset-0 bg-cover bg-center dark:brightness-50" />
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur">
vue
dark:brightness-50 在暗黑模式下将背景图亮度降低到 50%，dark:bg-gray-800/80 使用深色半透明背景。
表单标签的国际化
表单中的 label 和 placeholder 使用 i18n key：
<el-form-item :label="t('login.username')" prop="username">
<el-input
v-model="formData.username"
:placeholder="t('login.usernamePlaceholder')"
/>
</el-form-item>
vue
对应的语言文件：
{
"login": {
"username": "用户名",
"usernamePlaceholder": "请输入用户名",
"password": "密码",
"passwordPlaceholder": "请输入密码",
"submit": "登录",
"remember": "记住密码",
"forgot": "忘记密码？",
"register": "还没有账号？立即注册"
}
}
json
本节小结
- 独立布局：登录页不使用 DefaultLayout，自行处理布局和工具组件。
- 隐藏菜单：通过
definePage({ meta: { hideMenu: true } })配置。 - 组件复用：ChangeLocale 和 DarkModeToggle 是独立组件，可在任意页面使用。
- 暗黑适配：使用 Tailwind 的
dark:前缀处理背景和卡片的颜色变化。
↑